<%- include('./layouts/header.ejs')%>

  <div class="main">
    <%- include('./layouts/navBar.ejs')%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <div class="col-md-4">
          <form id="myForm">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <input class="btn btn-primary" id="btnAdd" type="button" value="添加" />
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" id="delMore" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox" id="chkToggle"></th>
                <th>名称</th>
                <th>Slug</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
             
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <%- include('./layouts/aside.ejs')%>

  <%- include('./layouts/footer.ejs')%>
  <!-- 此处模板为右侧的所有的分类数据模板 -->
  <script type='text/template' id="categoriesListTmp">
     {{each data as item key}}
        <tr>
          <td class="text-center"><input type="checkbox" data-id="{{item.id}}" class="chkDel"></td>
            <td>{{item.name}}</td>
            <td>{{item.slug}}</td>
            <td class="text-center">
              <!-- <a href="javascript:;" class="btn btn-info btn-xs">编辑</a> -->
              <span class="btnEdit btn btn-info btn-xs" data-id="{{item.id}}">编辑</span>
              <!-- <a href="/delCategorieInfo?id={{item.id}}" class="btn btn-danger btn-xs">删除</a> -->
              <span class="btnDel btn btn-danger btn-xs" data-id="{{item.id}}" >删除</span>
            </td>
              </tr>
          {{/each}}
  </script>

  <!-- 此处模板是左侧的某条分类信息模板 -->
  <script type="text/template" id="categoriesInfoTmp">
    <h2>编辑分类目录</h2>
    <input type="hidden" name="id" value="{{id}}">
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" value="{{name}}" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" value="{{slug}}" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <input class="btn btn-primary" id="btnUpdate" type="button" value="更 新" />
            </div>
  </script>

  <!-- 此处的模板是在分类更新后还原回添加状态时的模板 -->
  <script type="text/template" id="categoriesLeftTmp">
    <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <input class="btn btn-primary" id="btnAdd" type="button" value="添加" />
            </div>
  </script>
  <script>
    //1. 发送ajax请求，请求所有的分类信息
    $.ajax({
      type:'get', // 是用来获取所有的分类信息
      url:'/getAllCategoriesInfo',
      dataType:'json',
      success:function(res){
        // console.log(res);
        if(res&&res.code==0){
          var htmlStr = template('categoriesListTmp',res)
          $('tbody').html(htmlStr)
        }
      }
    })

    // 2. 添加分类 
    // 2.1 注册事件  使用委托的方式注册事件
    $('#myForm').on('click','#btnAdd',function () {
      // alert(123)
      // 2.2 发送ajax请求
      $.ajax({
        type:'post',
        url:'/addCategorieInfo',
        data:$('#myForm').serialize(),
        dataType:'json',
        success:function(res){
          // console.log(res);
          if (res && res.code == 0) {
            var htmlStr = template('categoriesListTmp', res) //调用模板生成模板字符串
            $('tbody').html(htmlStr) // 渲染页面

            $('input[name]').val('')
            // $('#myForm')[0].reset();
          }
        }
      })
    })

    // 3. 删除分类 
    // 3.1 使用委托的方式给删除按钮注册事件
    $('tbody').on('click','.btnDel',function () {
      
      // console.log($(this).attr('data-id'));
      // 3.2 发送ajax 请求
      $.ajax({
        type:'get',
        url:'/delCategoriesInfo',
        data:{
          id: $(this).attr('data-id')
        },
        dataType:'json',
        success:function(res){
          if(res&&res.code==0){
            var htmlStr = template('categoriesListTmp', res) //调用模板生成模板字符串
            $('tbody').html(htmlStr) // 渲染页面
          }
        }
      })
    })
    
    // 4. 编辑之显示用户信息
    // 4.1 使用委托的方式来注册事件
    $('tbody').on('click','.btnEdit',function () {
      // alert(112233)
      // 4.2 发送ajax请求
      $.ajax({
        type:'get', // 获取信息一般都是用get请求请求数据非常快
        url:'/editCategoriesInfo',
        data:{
         id:$(this).attr('data-id'),
        },
        dataType:'json',
        success:function(res){
          console.log(res);
          if(res&&res.code==0){
           // 准备模板渲染数据
           var htmlStr = template('categoriesInfoTmp',res.data[0])
           $('#myForm').html(htmlStr)
          }
        }
      })
    })
  
    // 5. 编辑之更新分类数据
    // 5.1 使用委托给更新按钮注册事件
    $('#myForm').on('click','#btnUpdate',function () {
      //  alert(78999)
      // 5.2 发送ajax请求
      $.ajax({
        type:'post', // 请求方式
        url:'/updateCategoriesInfo',  // 请求的后端接口
        data:$('#myForm').serialize(), // 表单序列化
        // 会将form标签中,所有的具有name属性的input/textarea/select标签中的值
        // 一次性获取到并拼接成字符串: "name=aaa&slug=abc&id=10"
        dataType:'json',
        success:function(res){
          console.log(res);
          // 调用模板 重新渲染右侧列表数据
          var htmlStr = template('categoriesListTmp',res)
          $('tbody').html(htmlStr)

          // 重新将左侧渲染回添加的状态
          var htmlStr1 = template('categoriesLeftTmp',{})
          $('#myForm').html(htmlStr1)
        }
      })
    })
 
    // 6. 全先与全不选 
    $('#chkToggle').on('click',function () {
      // 获取当前小按钮的选中状态
      var flag = $(this).prop('checked')
      // console.log(flag);
      // 让所有的小按钮的选中与否与总按钮保持一致
      $('.chkDel').prop('checked',flag)

      // 当所有的小按钮被选中的时候，批量删除按钮要显示出来
      flag? $('#delMore').show('normal'): $('#delMore').hide('normal')
    })

    // 7. 给所有的小按钮注册事件,当所有的小按钮都选中的时候要让总的小按钮也选中，要让批量删除按钮显示出来,如果小按钮有两个或两个以上被选中的话，批量删除也要显示
    // 鉴于之前的问题所在，我们这里要使用委托的方式来注册事件
    // 7.1 给所有的小按钮使用委托注册事件
    $('tbody').on('click','.chkDel',function () {
      // console.log(112233);
      
      // 7.2 获取所有的小按钮的个数
      var count = $('.chkDel').size();//

      // 7.3 获取被选中的小按钮的个数
      var num = $('.chkDel:checked').size()

      // 7.4. 当被选中的小按钮的个数>=2,让批量删除按钮显示出来否则不显示
      num>=2? $('#delMore').show('normal') : $('#delMore').hide('normal')

      // 7.5 当被中的小按钮的个数和总个数一样的时候，要让总的小按钮也要选中
      num==count?$('#chkToggle').prop('checked',true): $('#chkToggle').prop('checked', false)
    })
 
    // 8. 批量删除数据
    // 8.1 给批量删除按钮注册事件
    $('#delMore').on('click',function () {
      
      // 8.3 获取所有的要删除的小按钮的id值
      var ids = [];
      $('.chkDel:checked').each(function(key,ele){
        // ele是DOM对象
        ids.push($(ele).attr('data-id'))
      })
      console.log(ids);
      // 8.2 发送请求
      $.ajax({
        type:'post',
        url:'/delMoreCategoriesInfo',
        data:{
          ids:ids
        },
        dataType:'json',
        success:function(res){
          // 重新渲染右侧分类列表
          console.log(res);
          var htmlStr=template('categoriesListTmp',res)
          $('tbody').html(htmlStr)
        }
      })
    })
 </script>
